<template>
  <div class="redp-wrap">
    <div class="redp-head">
      <div class="img-title"><img src="../../assets/images/img4/ren.png" /></div>
      <div class="name">{{name}}</div>
      <div class="tips">{{phrases}}</div>
    </div>
    <div class="redp-content">
      <div class="r-coupon">
        <h2>{{coupon.conpouTitle}}</h2>
        <div>有效期: {{coupon.conpouDate.start}} - {{coupon.conpouDate.end}}</div>
        <div class="conpouMoney">{{coupon.conpouMoney}} <span>元</span></div>
        <div>券码: {{coupon.conpouCode}}</div>
      </div>
      <div class="result-coupon">
        <span>优惠券已放入您的账户中</span>
        <a href="#">查看</a>
      </div>
    </div>
    <div class="redp-foot">
      <h2><span>使用说明</span></h2>
      <div class="redp-foot-content">
        <p><span>1.</span> <span>此处根据实际规则填文字此处根据实际规则填文字此处根据实际规则填文字</span></p>
        <p><span>2.</span> <span>此处根据实际规则填文字此处根据实际规则填文字</span></p>
        <p><span>3.</span> <span>此处根据实际规则填文字此处根据实际规则填文字字此处根据实际规则填文字字此处根据实际规则填文字字此处根据实际规则填文字</span></p>
        <p><span>4.</span> <span>此处根据实际规则填文字此处根据</span></p>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
	  data: function() {
	    return {
	      name: '', // 中奖人名字
	      namePic: '', //中奖人头像
	      phrases: '', // 介绍
	      
	      // 券信息
	      coupon: {
  	      conpouTitle: '', // 券title 
	        conpouDate: '', // 券时间
	        conpouMoney: 0, // 券金额
	        conpouCode: ''  // 券code
	      }
	    }
	  },
	  ready: function() {
	    
	    var me = this;
	    
	    // 设置值
	    me.name = '江凯';
//	    me.namePic = 'assets/images/img4/ren.png';
      me.phrases = '陛下您的优惠券，一定要来哦！';
      // 券信息
      me.coupon = {
        conpouTitle: '车享家优惠券·换防冻液',
        conpouDate: {
          start: '2017.02.15',
          end: '2017.02.18'
        },
        conpouMoney: 20,
        conpouCode: 'DJ6329ff0cbc'
      };
      
	    
	  },
	  components: {
	    
	  },
	  methods: {
	    
	  }
	}
</script>

<style>
	body {
    background-color: #faf7f3 !important; 
    color: #243742;
  }
</style>
<style lang="scss" scoped>
  
  @import "../../assets/css/_functions.scss"; 
  @import "../../assets/css/_variables.scss";
  
  
  
.redp-wrap {
  font-size: rem(14);
  .redp-head {
    background: url('../../assets/images/img4/head-bg.png') center top no-repeat;
    background-size: contain;
    font-family: "Microsoft YaHei";
    .name {
      font-size: rem(14);
      line-height: rem(40);
      color: #243742;
      text-align: center;
    }
    .img-title {
      text-align: center;
      padding-top: rem(86);
    }
    .tips {
      text-align: center;
      font-size: rem(14);
    }
  }
  
  
  .redp-content {
    margin-top: rem(18);
    padding: 0 rem(20);
    box-sizing: border-box;
    .r-coupon {
      background: url('../../assets/images/img4/coupon-bg.png') no-repeat;
      background-size: cover;
      height: rem(147);
      padding-left: rem(23);
      box-sizing: border-box;
      h2 {
        font-size: rem(16);
        line-height: rem(24);
        font-family: "Microsoft YaHei";
        padding-top: rem(16);
      }
      div:nth-of-type(1) {
        color: #6e6e6e;
        line-height: rem(30);
      }
      .conpouMoney {
        color: #f5a623;
        font-size: rem(40);
      }
      .conpouMoney span {
        font-size: rem(18);
        font-family: "Microsoft YaHei";
      }
      div:nth-of-type(3) {
        color: #FFFFFF;
        line-height: rem(30);
      }
    }
    .result-coupon {
      line-height: rem(36);
      text-align: center;
      color: #243742;
    }
    .result-coupon a {
      color: #4a90e2;
      text-decoration: underline;
    }
  }
  
  
  .redp-foot {
    margin-top: rem(20);
    h2 {
      position: relative;
      padding: 0 rem(20);
      text-align: center;
      border-top: 1px solid  #b6b6b6;
      height: rem(30);
    }
    h2 span {
      position: absolute;
      left: 50%;
      top: -50%;
      box-sizing: border-box;
      transform: translate(-50%, 50%);
      background: #faf7f3;
      display: block;
      width: rem(88);
    }
    .redp-foot-content {
      padding: 0 rem(23);
      p {
        display: flex;
        margin-bottom: rem(10);
      }
    }
  }
  
}     
</style>